<template>

	<body>
		<div class="loan_nav col_nav">
			<ul>
				<li>
					<a href="javascript:history.go(-1)">
						<i class="iconfont">&#xe61e;</i>
					</a>
				</li>
				<li>
					<p>发布评价</p>
				</li>
				<li @click="save">
					<p>发布</p>
				</li>
			</ul>
		</div>
		<div class="interval_T">

		</div>
		<div class="loan_detail">
			<ul>
				<li>
					<p>贷款人：
						<span>{{applyInfo.userName}}</span>
					</p>
					<p>贷款类型：
						<span>{{applyInfo.loansType}}</span>
					</p>
				</li>
				<li>
					<p>贷款时间：
						<span>{{applyInfo.createDate}}</span>
					</p>
					<p>贷款金额：
						<span>{{applyInfo.loansMoney}}</span>
					</p>
				</li>
			</ul>
		</div>
		<div class="evaluate">
			<ul>
				<li @click="params.commentLevel = 1">
					<i class="iconfont" :class="params.commentLevel==1&&'col_9'">&#xe620;</i>
					<span>好评</span>
				</li>
				<li @click="params.commentLevel = 2">
					<i class="iconfont" :class="params.commentLevel==2&&'col_9'">&#xe634;</i>
					<span>中评</span>
				</li>
				<li @click="params.commentLevel = 3">
					<i class="iconfont" :class="params.commentLevel==3&&'col_9'">&#xe646;</i>
					<span>差评</span>
				</li>
			</ul>
		</div>
		<div class="content">
			<textarea v-model="params.content" rows="6" placeholder="这次贷款您觉得满意么？说说您的感想！"></textarea>
		</div>
		<div class="anonymous">
			<ul>
				<!--<li><div></div></li>
				<li><p>匿名</p></li>-->
				<li>
					<check-icon :value.sync="checked" type="plain">匿名</check-icon>
				</li>
				<li>
					<p class="col-gray">您写的评价会以匿名的形式展现</p>
				</li>
			</ul>
		</div>
		<div class="Parting_line Parting_l">

		</div>
		<div class="Enterprise_score col1">
			<ul class="Enterprise_s">
				<li>
					<i class="iconfont col-gray">&#xe602;</i>
				</li>
				<li>
					<p>企业评分</p>
				</li>
			</ul>
			<group>
				<cell title="产品相符">
					<rater v-model="params.pdLevel" star="✩" active-color="#FF9900" :margin="4"></rater>
				</cell>
			</group>
			<group>
				<cell title="服务速度">
					<rater v-model="params.serviceLevel" star="✩" active-color="#FF9900" :margin="4"></rater>
				</cell>
			</group>
			<group>
				<cell title="服务态度">
					<rater v-model="params.service2Level" star="✩" active-color="#FF9900" :margin="4"></rater>
				</cell>
			</group>
		</div>
		<!--星星评分-->
	</body>
</template>

<script>
import { Rater, Group, Cell, Range, CheckIcon } from 'vux'

export default {
	components: {
		Rater,
		Group,
		Cell,
		Range,
		CheckIcon,
	},
	data() {
		return {
			params: {
				commentLevel: 1,
				pdLevel: 5,
				serviceLevel: 5,
				service2Level: 5,
				loansApplyId: this.$route.params.id
			},
			checked: false,
			applyInfo: {}
		}
	},
	created() {
		this.query()
	},
	methods: {
		query() {
			const id = this.$route.params.id
			this.$vux.loading.show()
			this.$http.get(`/app/loan/info/${id}`).then(json => {
				const { code, loan } = json
				if (code === 0) {
					this.applyInfo = loan
				}
				this.$vux.loading.hide()
			})
		},
		save() {
			this.$http.post('/app/loan/evaluate', this.params).then(json => {
				const { code } = json
				if(code === 0) {
					this.$vux.toast.show({ text: '评论成功' })
					this.$router.go(-1)
				}
			})
		}
	}
}
</script>

<style>
.vux-label {
  font-size: 0.26rem !important;
}
.weui-cells:before {
  border: none !important;
}
.weui-cells:after {
  border: none !important;
}
.weui-cells {
  margin: 0 !important;
}
.weui-cell {
  padding: 0.1rem 0.2rem !important;
}
.Enterprise_score .vux-cell-primary {
  flex: none !important;
  -webkit-box-flex: -1 !important;
  -webkit-flex: none !important;
  font-size: 0.26rem !important;
}
.vux-rater {
  padding-left: 0.3rem;
}
.vux-check-icon > span {
  font-size: 0.28rem !important;
  margin: auto 0;
}
.vux-check-icon > i {
  /*line-height: 1rem !important;*/
  display: block;
}
.vux-check-icon {
  display: flex !important;
}
/*.anonymous .weui-icon-success-circle {
		color: red !important;
	}
	.anonymous .weui-icon-success {
		color: red !important;
	}*/
.anonymous .vux-check-icon > .weui-icon-success:before,
.anonymous .vux-check-icon > .weui-icon-success-circle:before {
  color: #ff6601 !important;
}
.weui-icon-circle {
  font-size: 0.4rem !important;
}
.weui-icon-success-circle {
  font-size: 0.4rem !important;
}
.vux-check-icon > i {
  margin: auto 0;
}
.vux-check-icon {
  font-size: 0.26rem !important;
}
</style>